<link rel="stylesheet" href="__CDN__/assets/libs/fullcalendar/dist/fullcalendar.css">
<style>
    .fc-day.selected {
        background: #e0f2be!important;
    }

    .fc-event.fc-completed {
        text-decoration: line-through;
    }

    .fc-event.fc-expired {
        background: #999!important;
        border-color: #999!important;
    }

    .calendar-trash {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 100%;
        height: 52px;
        text-align: center;
        line-height: 52px;
        color: #e74c3c;
        background-color: #f2dede;
        display: none;
    }

    .fc .fc-toolbar .calendar-trash .fa {
        font-size: 20px;
        display: inline-block;
        vertical-align: middle;
    }

    .fc .fc-toolbar .calendar-trash>* {
        float: none
    }
    .input-group .input-group-selectpage{
        position:static;
    }
</style>

<section class="">
    <div class="row">
        <div class="col-md-3">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h4 class="box-title">{:__('Wait for class')}</h4>
                </div>

                <div class="box-body">
                    <!-- the events -->
                    <div id="external-events">
                        {foreach $classList as $k=>$v}
                        <div class="external-event" data-id="{$v.id}" data-title="{$v.branchname}-{$v.classroomname}-{$v.teachername}" data-background="{$v.background}" style="color:#fff; background-color: #e74c3c">[{$v.branchname}]{$v.classname}-{$v.classroomname}-{$v.teachername}</div>
                        {/foreach}
                        <div class="checkbox"> 拖动到右侧日历排课 </div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /. box -->
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">{:__('Add class')}</h3>
                </div>
                <div class="box-body">
                    <form id="add-form" action="eduadmin/classschedule/add" role="form" method="post">
                        <div class="input-group" style="margin-bottom:10px;">
                            <span class="input-group-addon">{:__('Branchids')} </span>
                            <input id="c-branchids" data-rule="required" data-source="branch/selectpage" data-multiple="false" class="form-control input-group-selectpage" name="row[branchids]" type="text" value="" placeholder="{:__('Please select a branchids')}">
                        </div>
                        <div class="input-group" style="margin-bottom:10px;">
                            <span class="input-group-addon">{:__('Classid')} </span>
                            <input id="c-classid" data-rule="required" data-source="eduadmin/classes/selectpage" data-multiple="false" class="form-control input-group-selectpage" name="row[classid]" type="text" value="" placeholder="{:__('Please select a classid')}">
                        </div>
                        <div class="input-group" style="margin-bottom:10px;">
                            <span class="input-group-addon"> {:__('Teacherid')} </span>
                            <input id="c-teacherid" data-rule="required" data-source="auth/admin/getTeacher" data-field='nickname' data-multiple="false" class="form-control input-group-selectpage" name="row[teacherid]" type="text" value="" placeholder="{:__('Please select a teacherid')}">
                        </div>
                        <div class="input-group" style="margin-bottom:10px;">
                            <span class="input-group-addon"> {:__('Classroomid')} </span>
                            <input id="c-classroomid" data-rule="required" data-source="baseadmin/classroom/selectpage" data-multiple="false" class="form-control input-group-selectpage" name="row[classroomid]" type="text" value="" placeholder="{:__('Please select a classroomid')}">
                        </div>
                        <div class="input-group" style="margin-bottom:10px;">
                            <label for="c-type-event">
                                <input id="c-type-event" name="type" value="event" type="radio" checked=""> {:__('Add wait for class')}</label> &nbsp;
                            <label for="c-type-calendar">
                                <input id="c-type-calendar" name="type" value="calendar" type="radio"> {:__('Add to calendar')}</label>
                        </div>
                        <div class="input-group" id="daterange" style="margin-bottom:10px;display:none;">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar fa-fw"></i>
                            </span>
                            <input id="c-starttime" style="margin-bottom:-1px;" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm"
                                data-use-current="true" name="row[starttime]" type="text" value="{:date('Y-m-d 00:00')}">
                            <input id="c-endtime" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm" data-use-current="true"
                                name="row[endtime]" type="text" value="{:date('Y-m-d 00:00')}">
                        </div>
                        <div class="">
                            <button type="submit" class="btn btn-primary">{:__('Add')}</button>
                            <button type="reset" class="btn btn-default">{:__('Reset')}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-md-9">
            <div class="box box-solid">
                <div class="box-body no-padding">
                    <div id="calendar"></div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /. box -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>